<template>
	<div class="head1">
		<carttop></carttop>
	</div>
	
	<div class="head2">
		<img :src="logo" alt="Logo Icon" class="logo-img" /> 
		<div class="titlesettle">结算页</div>
		 <el-steps style="max-width: 1000px ;width: 600px;margin-left: auto;" :active="2" align-center>
		    <el-step title="1.我的购物车"  />
		    <el-step title="2.填写核对订单信息"/>
		    <el-step title="3.成功提交订单" />
		  </el-steps>
	</div>
	<div class="main">
		<div class="main-title">填写并核对订单信息</div>
		<div class="main-1">
			<div class="main-1-1">
				<div class="main-1-1-1">收货人信息</div>
				<a href="javascript:void(0)" @click="router.push('/editAddress')" style="text-decoration: none;font-size: 13px;">新增收货地址</a>
			  </div>
			<div class="main-1-2">
				<div class="main-1-2-1">
					<div v-if="form.address == null">{{defaultAddress.linkUser}}</div>
					<div v-else>{{form.address.linkUser}}</div>
				</div>
				<div class="main-1-2-2">
					<div v-if="form.address == null">{{defaultAddress.linkAddress}}</div>
					<div v-else>{{form.address.linkAddress}}</div>
				</div>
				<div class="main-1-2-3">
					<div v-if="form.address == null">{{defaultAddress.linkPhone}}</div>
					<div v-else>{{form.address.linkPhone}}</div>
				</div>
				<div class="main-1-2-4">
					<div v-if="form.address == null">{{defaultAddress.linkUser}}</div>
					<div v-else>{{form.address.linkUser}}</div>
				</div>
				<div style="margin-left: auto;">
					<el-form-item label="选择其他收货地址">
						<el-select
                    v-model="form.address"
                    placeholder="选择地址"
                    style="width: 250px"
                  >
                    <el-option
                      v-for="item in address"
                      :key="item.id"
                      :label="item.linkAddress"
                      :value="item"
                    />
            </el-select>
					</el-form-item>
				</div>
			</div>
			<div class="main-1-3">
				支付方式
			</div>
			<div class="main-1-4">
				<div class="main-1-4-1">
					{{form.payType}}
				</div>
				<div style="margin-left: auto;">
					<el-form-item label="选择其他支付方式">
						<el-select
							v-model="form.payType" 
							placeholder="选择支付方式"
							style="width: 250px"
						>
							<el-option
								v-for="item in type"
								:key="item.name"
								:label="item.name"
								:value="item.name"
							/>
            </el-select>
					</el-form-item>
				</div>
			</div>
			<div class="main-1-5">
				送货清单
			</div>
			<div class="main-1-6" v-for="(good) in goods" :key="good.id">
				<div class="main-1-6-2">
					<div class="main-1-6-2-1">
						<div class="main-1-6-2-1-1">
							商家：{{good.shopName}}
						</div>
					</div>
					<div class="main-1-6-2-2">
						<div class="img">
							<img :src="Path.imgPath + good.imgs" alt="Cart Item" style="width: 80px; height: 80px;">	
						</div>
						<div class="descri">
							{{good.description}}
						</div>
						<div class="price">
							￥{{good.price}}
						</div>
						<div class="num">
							×{{good.count}}
						</div>
						<div class="status">
							<div v-if="good.store > 0 ">有货</div>
							<div v-else>没货</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-2">
			
		</div>
		<div class="main-3">
			<div class="main-3-1">
				<div class="main-3-1-1" >
					应付总额：
				</div>
				<div class="main-3-1-2" v-if="form.totalPrice !== null">￥{{form.totalPrice.toFixed(2)}}</div>
			</div>
			<div class="main-3-2">
				<div class="main-3-2-1" style="display: flex;">
					寄送至：
						<div v-if="form.address == null">{{defaultAddress.linkAddress}}</div>
						<div v-else>{{form.address.linkAddress}}</div>
				</div>
				<div class="main-3-2-2" style="display: flex;">
					收货人：
						<div v-if="form.address == null">{{defaultAddress.linkUser}}</div>
						<div v-else>{{form.address.linkUser}}</div>
				</div>
				<div class="main-3-2-3">
					{{}}
				</div>
			</div>
		</div>
		<div class="main-4">
			<button style="height: 80%;width:130px;color: white;font-weight: 900;
			        background-color: red;border: none;font-size: 16px;"
							@click="createOrder">提交订单</button>
		</div>
	</div>
	<div class="foot">
		<footerLzm></footerLzm>
	</div>
</template>

<script setup>
import carttop from '@/views/top-zjm/cart-top.vue';
import logo from '@/components/components-zjm/logo2.png'; 
import { ref,reactive,computed } from 'vue'; 
import footerLzm from '@/views/footer-lzm'
import router from '@/router';
import { get,post } from "@/plugins/axios"
import { useCartStore } from '@/stores/pinia';  
import { Path } from '@/constant';
import { ElMessage } from 'element-plus';
const cartStore = useCartStore(); 
const goods=ref([]);
const defaultAddress = ref({})
const address = ref([])
const goodId = ref([])
const count = ref([])
const id = ref([])
const form = ref ({
	payType: '我的余额',
	address: null,
	totalPrice: null,
}) 
const type = reactive([
	{name:"我的余额"},
	{name:"支付宝"},
	{name:"微信"}
])
getOrederGoods()
function getOrederGoods(){
	console.dir(cartStore.selectedGoods)                      
	goods.value = cartStore.selectedGoods
	if( goods.value != null){
		for(let i = 0;i < goods.value.length;i++ ){
		form.value.totalPrice += goods.value[i].count * goods.value[i].price
		goodId.value.push(goods.value[i].goodsId)
		count.value.push(goods.value[i].count)
		id.value.push(goods.value[i].id)
	}
	}
}
getAddress()
function getAddress(){
	get(Path.addressList,null,content => {
		address.value = content
		for(let i = 0;i<content.length;i++){
		if(content[i].isDefault == true){
			defaultAddress.value = content[i]
		}
	}
	})
}
function createOrder(){
	if(form.value.payType != null){
		if(form.value.address == null){
				form.value.address = defaultAddress.value
		}
			post(Path.orderCreate,{
				id: id.value,
				goodId: goodId.value,
				count: count.value,
				linkUser: form.value.address.linkUser,
				linkAddress: form.value.address.linkAddress,
				linkPhone: form.value.address.linkPhone,
				totalPrice: form.value.totalPrice,
				payType: form.value.payType,
			},content => {
				// 成功之后跳转到我的订单页面进行订单的付款，然后将购物车中的先清除
				cartStore.setSelectedGoods(null) 
				router.push('/trolley')
			})
	}else {
		ElMessage.warning("请选择您的支付方式");
	}
}
</script>

<style scoped lang="scss">
	.head2{
		display: flex;
		align-items: center;
		height: 117px;
		margin:0px 180.6px;
		background-color: white;	
		padding: 20px 0px 10px;
		.logo-img{
			height: 100%;
		}
		.titlesettle{
			font-size: 20px;
			font-weight: 900;
			color: #666666;
			margin-left: 2.5%;
		}
	}
	.main{
		margin: 0px 180.6px;
		padding-top: 50px;
		.main-title{
			font-size: 20px;
			color: #666666;
		}
		.main-1{
			background-color: #ffffff;
			width: 100%;
			height: auto;
			border: 0.5px solid #666666;
			padding: 0px 30px;
			.main-1-1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40px;
				.main-1-1-1{
					font-weight: 900;
					font-size: 16px;
				}
				
			}
			.main-1-2{
				border-bottom: 0.5px solid #a2a2a2;
				display: flex;
				align-items: center;
				height: 50px;
				.main-1-2-1{
				width: 143.2px;
				border: 2px solid red;
				font-size: 15px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				}
				.main-1-2-2{
					margin-left: 3%;
				}
				.main-1-2-3{
					margin-left: 3%;
				}
				.main-1-2-4{
					margin-left: 3%;
				}
			}
			.main-1-3{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40px;
				font-weight: 900;
				font-size: 16px;
				
			}
			.main-1-4{
				border-bottom: 0.5px solid #a2a2a2;
				display: flex;
				align-items: center;
				height: 50px;
				.main-1-4-1{
					width: 143.2px;
					border: 2px solid red;
					font-size: 15px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.main-1-5{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40px;
				font-weight: 900;
				font-size: 16px;
			}
			.main-1-6{
				height: 219.2px;
				background-color: #f3fbfe;
				margin: 0px 0px 10px;
				display: flex;
				.main-1-6-1{
					width: 330px;
					background-color: #f7f7f7;
					height: 100%;
					padding: 10px 10px 10px 20px;
					.main-1-6-1-1{
						height: 24px;
						padding: 2px 0px;
						color: #666666;
						font-size: 12px;
					}
					.main-1-6-1-2{
						display: flex;
						align-items: center;
						height: 32.2px;
						border:2px solid red;
						width: 90px
					}
					.main-1-6-1-3{
						font-size: 14px;
						color: #666666;
						margin-top: 7%;
					}
					.main-1-6-1-4{
						font-size: 14px;
						color: #666666;
						margin-top: 7%;
					}
				}
				.main-1-6-2{
					width: 100%;
					height: 156.73px;
					padding: 10px 0px;
					.main-1-6-2-1{
						padding: 0px 20px;
					}
					.main-1-6-2-2{
						display: flex;
						padding:  0px 20px;
						margin-top: 3%;
						.descri{
							width: 40%;
							margin-left: 8%;
							font-size: 16px;
						}
						.price{
							color: red;
							margin-left: 8%;
						}
						.num{
							margin-left: 7%;
							font-size: 13px;
						}
						.status{
							margin-left: 9%;
							font-size: 13px;
						}
					}
				}
			}
		}
		.main-2{
			height: 56px;
		}
		.main-3{
			height: 80.3px;
			background-color: #f4f4f4;
			padding: 15px 10px 15px 0px;
		
				.main-3-1{
					display: flex;
					.main-3-1-1{
						margin-left:80% ;
						font-size: 15px;
					}
					.main-3-1-2{
						font-size: 19px;
						color: #ff0000;
					}
				}
				.main-3-2{
					display: flex;
					font-size: 13px;
					.main-3-2-1{
						margin-left: 47%;
					}
					.main-3-2-2{
						margin-left: 3%;
					}
					.main-3-2-3{
						margin-left: 2%;
					}
				}
				
			}
			.main-4{
				height: 50px;
				margin-top: 2%;
				float: right;
			}
			
			
		}
	.foot{
		margin-top:13%;
		background-color: #fafafa;
	}
	
</style>